<template>
	<view>
		<view class="banner">
			<swiper class="screen-swiper" :class="'square-dot'" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500">
				<swiper-item v-for="(item,index) in imgList" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
        <view class="quote">
            <text>今天分一分，明天美十分！</text>
        </view>
		<view class="cu-bar bg-darkGray">
			<view class=" search-form  round ">
				<text class="cuIcon-search text-green"></text>
				<input @focus="gotoSearch()" type="text" placeholder="输入垃圾名称"></input>
			</view>
		</view>

		<!-- <view style="text-align: center; color: #00cc77;margin: 40px 0;font-weight: bold;font-size: 18px;">或</view> -->
        <view class="classify">
            <view class="garbage">
                <image src="../../static/images/ljkhs.jpeg" mode="aspectFill"></image>
            </view>
            <view class="garbage">
                <image src="../../static/images/ljyh.jpeg" mode="aspectFill"></image>
            </view>
            <view class="garbage">
                <image src="../../static/images/ljcy.jpeg" mode="aspectFill"></image>
            </view>
            <view class="garbage" style="margin: 0;">
                <image src="../../static/images/ljothers.jpeg" mode="aspectFill"></image>
            </view>
        </view>
		<view v-if="!results" class='ai-view' @click="onGetImgClick">
			<image src='/static/images/paizhao.png' class='ai-paizhao'></image>
			<text class='txt'>拍照识别</text>
		</view>
		<view v-else><text>{{results}}</text></view>
		<view :class="[isShow?'show':'','cu-modal']" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="radioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in results" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.keyword}}</view>
								<radio class="round" :value="item.keyword"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
	</view>
</template>
<script>
    import config from "@/nxTemp/config/index.config.js";
    export default {
        data() {
            return {
                imgList: [
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fspider.ws.126.net%2Fadfa2bc19b868eafdb100b9177417411.jpeg&refer=http%3A%2F%2Fspider.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650033431&t=cfe1cf4c8cbf59a75e01c9089fee4fb6',
                    '../../static/images/type1.jpg',
                ],
                token: '',
                results: "",
                isShow: false
            };
        },
        onShow() {
            this.getToken();
        },
        onLoad(parms) {
            let that = this;

        },
        onUnload() {

        },
        methods: {
            hideModal() {
                this.isShow = false
            },
            radioChange(e) {
                let radioValue = e.detail.value;
                this.$Router.push({
                    path: '/pages/public/search',
                    query: {
                        name: radioValue
                    }
                });

            },
            getToken() {
                uniCloud.callFunction({
                        name: 'getBaiduToken',
                        data: {
                            apiKey: `${config.apiKey}`,
                            secretKey: `${config.secretKey}`
                        }
                    })
                    .then(res => {
                        //存token
                        if (res.result.data.access_token) {
                            this.token = res.result.data.access_token;
                            console.log('token', this.token);
                        }
                    });
            },
            onGetImgClick() {
                const that = this
                uni.chooseImage({
                    count: 1, // 最多可以选择的图片张数，默认9
                    sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
                    sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
                    success: function(res) {
                        console.log('res.tempFilePaths', res.tempFilePaths)
                        uni.uploadFile({
                            filePath: res.tempFilePaths[0],
														url: 'http://localhost:8080/upload/image',
														name: 'file',
														header: {
															'content-type': 'multipart/form-data',
														},
                            success: childRes => {
                              console.log('res.data', childRes.data);
                              this.results = childRes.data
                            },
                            fail: err => {
                                console.log('err', err);
                                wx.showToast({
                                    title: '拍照失败,未获取相机权限或其他原因',
                                    icon: "none"
                                })
                            }
                        })
                    }
                })
            },
           
            gotoSearch() {
                console.log('gotoSearch');
                this.$Router.push({
                    path: '/pages/public/search',
                });
            }

        }
    }
</script>

<style lang="less" scoped>
    .banner {}
    
    .quote {
        height: 80rpx;
        background-color: rgba(228, 226, 226, 0.3);
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 80rpx;
        font-family: "华文彩云";
    }
    
    .bg-darkGray {
        background-color: #f6f6f6;
        color: #ffffff;
    }
    
    .cu-bar .search-form {
        height: 90rpx;
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        width: calc(100% - 60rpx);
    }
    
    .cu-bar .search-form input {
        height: 100rpx;
    }
    
    .cu-bar {
        padding-top: 20px;
    }
    
    .classify {
        height: 300rpx;
        box-sizing: border-box;
        padding: 20rpx 20rpx 60rpx 20rpx;
        display: flex;
        flex-direction: row;
    }
    
    .classify .garbage {
        flex-grow: 1;
        margin-right: 30rpx;
    }
    
    .classify .garbage image {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
    
    .ai-view {
        width: 100%;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    
    .txt {
        font-size: 24rpx;
        /*font-weight: bold;*/
        color: #00cc77;
        margin-top: 10rpx;
    }
    
    .move_gif {
        width: 200rpx;
        height: 200rpx;
        position: absolute;
        right: 0;
        margin: auto 0;
    }
    
    .move_gif image {
        width: 200rpx;
        height: 200rpx;
    }
    
    .ai-paizhao {
        width: 150rpx;
        height: 150rpx;
    }
</style>